<!Doctype html>
<html>
	<head>
		<title>demo</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="page">
			<header class="onTop">
				<div class="logo">
					<img src="logo.png" alt="logo">
				</div>
				<nav class="navigation">
					<ul>
						<li><a href="index.html">home page</a></li>
						<li><a href="猫.html">exhibition</a></li>
						<li><a href="大爱古风.html">antiquity</a></li>
						<li><a href="我的大学.html">university</a></li>
					</ul>
				</nav>
			</header>
			
			<div class="banner">
				<div class="banner_img">
					<img src="index-01.jpg" alt="猫">
					<div class="banner_title">
						<h1>BRITISH <span class="white">SHORTHAIR</span></h1>
						<h1><span class="white_circle">&</span> SCOTTISH <span class="white">FOLD</span></h1>
					</div>
					<h2 class="banner_subtitle">CAT BREEDER WEBSITE</h2>
				</div>
				<div class="banner_div">
					<div class="banner_div_grid">
						<h3>FOLLOW US</h3>
						<div class="banner_icon">
							<img src="icon01.jpg" alt="猫">
							<img src="icon02.jpg" alt="猫">
							<img src="icon03.jpg" alt="猫">
							<img src="icon04.jpg" alt="猫">
						</div>
					</div>
					<div class="banner_div_grid">
						<h3>CONTACTS</h3>
						<p class="banner_p">
							<img src="icon05.jpg" alt="猫">
							+1 800 559 35 48
						</p>
						<p class="banner_p">
							<img src="icon06.jpg" alt="猫">
							info@demolink.org
						</p>
					</div>
					<div class="banner_div_grid">
						<h3>LOCATION</h3>
						<p class="banner_p_grey">28 JACKSON BLVD STE 1020 CHICAGO IL 60604-2340</p>
					</div>
				</div>
			</div>

		
		
		<div class = "imgcenter">
			<div>
				<div>
					<img src="index-02.png" alt="猫">
				</div>
				<span class="right">
					<p>01</p>
					<p>_______________________________________</p>
				</span>
			</div>
			<div>
				<p class="pd1">WELCOME TO OUR WEBSITE</p>
				<p class="banner_p_grey">
					For many years, the British Shorthair has been named the country's most popular breed according to the Governing Council of the Cat Fancy (GCCF), and with its affectionate nature and teddy-bear good looks, it's not hard to see why. As far as personality goes, the British Shorthair is an amazing cat.
				</p>
				<p class="thirdp">view all cats for sale</p>
			</div>
		</div>
	
	
		<div class="page3">
			<div class="distan3">
				<hr/>
				<p class="cen3">BRITISH SHORTHAIR BREED PROFILE</p>
			</div>
			
			<div>
				<div id="guarantee">
					<span class="txt3">
						<ul  class="ul3">
							<li><span class="colors">BREED NUMBER</span>…………………40</li>
							<li><span class="colors">AVERAGE LIFESPAN</span>…………………15 to 20 years</li>
							<li><span class="colors">TEMPERAMENT</span>…………………Friendly and affectionate, loyal and devoted, good with children and other pets.</li>
							<li><span class="colors">WEIGHT</span>…………………Males 6.8 to 8.1kg; females 4.5 to 5.4kg</li>
							<li><span class="colors">AVAILABILITY</span>…………………Easy</li>
							<li><span class="colors">COLOURS</span>…………………Available in almost every colour and coat pattern you can think of.</li>
							<li><span class="colors">GROOMING</span>…………………Once a week is adequate. A simple hand groom will often remove dead hair.</li>
						</ul>	
					</span>
				</div>
			</div>
		</div>
		
		
		
		<div class = "imgcenter">
			<div>
				<img src="index-04.png">
				<span class="right">
					<p>02</p>
					<p>_______________________________________</p>
				</span>
			</div>
			<div>
				<p class="pd1">CHOOSING A CAT</p>
				<p class="grey4">
					Choosing between a male and a female is not an easy task, as both make wonderful companions. Differences in personality are mostly attributable to the fact that everyone has something unique about them, rather than to male vs. female differences.
				</p>
			</div>
		</div>
	
		<div class="page5">
			<div>
				<div class="box1">
					<div>
						<img width="100%" src="index-05.jpg" alt="猫">
						<p class="text5">Date of birth: 19 Feb 2016</p>
						<p class="grey5">Delivery possible</p>
					</div>
				</div>
				
				<div class="box2">
					<img width="100%" src="index-06.jpg" alt="猫">
					<p class="text5">Date of birth: 19 Feb 2016</p>
					<p class="grey5">Delivery possible</p>
				</div>
			
				<div class="box3">
					<img width="100%" src="index-07.jpg" alt="猫">
					<p class="text5">Date of birth: 19 Feb 2016</p>
					<p class="grey5">Delivery possible</p>
				</div>
			</div>
			
			<div class="p5">
				<p>view all cats for sale</p>
			</div>
			
		</div>
		<div  class="bacol">
			<div class="cen3">
				<hr/>
				<p class="distan5">ARTICLES & PUBLICATIONS</p>
			</div>
			
			<div>
				<div class="leftd6">
					<p class="text5">PROBLEM OF KITTEN MORTALITY</p>
					<p class="grey6">Kitten mortality is a distressing,as well as an economic problem,which occurs to some extent in any breeding program.
					   A study by Scott et al,1976,of over 3,000 kittens in over 800 litters indicated 34.5% mortality between birth and 
					   one year,which is a considerable number.
					</p>   
				</div>
				
				<div class="cend6">
					<img src="index-08.png" alt="猫">
				</div>
				
				<div class="rightd6">
					<p class="text5">MYTHS & FACTS ABOUT SPAYING OR NEUTERING</p>
					<P class="grey6">The animal population is exploding.Each year millions of unwanted pets are born and most are treated like "living garbage" and disposed of.
					   The primary causes of pet euthanasia are the failure of owners to have their pets spayed or neutered and animals that are abandoned or relinquished
					   to shelters because of obedience problems.
					</p>
				</div>	
				<span class="right623">
					<p>03</p>
				</span>
				<span class="right62">
					<p>_______________________________________</p>
				</span>
			</div>
		</div>	
		
			<div class="cen7">
				<img class="img7" src="map.jpg" alt="猫">
			</div>
			
			<div class="cen7">
				&copy; 2012 | Head First Lounge
			</div>
		</div>
		<div class="to_the_top" onclick="toTop()">
			↑
		</div>
		
		<script src="jquery-3.3.1.min.js"></script>
		<script src="index.js"></script>		
	</body>
</html>